import React, { Fragment } from 'react';
import BoxSpin from './BoxSpin';
import { useStyle } from "./style";

export interface ProBoxProps {
  loading: boolean;
  spinMinHeight?: number;     // 加载效果的最小高度
  isShowLoadText?: boolean;
  loadingText?: string;
  isNoData?: boolean;
  className?: string;
  errorMsg?: any;
  style?: React.CSSProperties;
  children?: React.ReactNode
}

/**
 * 盒子内容
 */
export const ProBox: React.FC<ProBoxProps> = ({ loading = false, spinMinHeight = 200, isShowLoadText = false, loadingText = "加载数据中...", isNoData = false, className = "", errorMsg, style, children }) => {
  const { styles } = useStyle();
  const defaultStyle = {
    width: "100%",
    height: "100%",
  };

  return (
    <Fragment>
      {
        loading
          ? (
            <div className={`${styles.center} ${className}`.trim()} style={Object.assign(defaultStyle, style)}>
              <BoxSpin style={{ minHeight: spinMinHeight }} spinProps={{
                tip: isShowLoadText ? loadingText : "",
                children: <span />
              }} />
            </div>
          )
          : (
            isNoData
              ? <div className={`${styles.center} ${className}`.trim()} style={Object.assign(defaultStyle, style)}><span>暂无数据</span></div>
              : (errorMsg ? <div className={`box ${className}`.trim()} style={Object.assign(defaultStyle, style)}>
                <h2>{errorMsg}</h2>
              </div> : children)
          )
      }
    </Fragment>
  );
};


